<template>
	<view class="login-page" :style="my_style">
		<view class="flex-center u-m-b-60">
			<image class="w-360 h-200" src="@/static/images/login/jrh.png"></image>
		</view>
		<!-- 表单 -->
		<view class="m-t-128 form">
			<view class="cell flex">
				<view class="font-28 line-1 m-r-30">账号</view>
				<u-input @blur="focusPaw" class="flex-1 input" type="number" maxlength="11" v-model="mobile"
					placeholder="请输入账号" />
			</view>
			<view class="cell flex u-m-b-20">
				<view class="font-28 line-1 m-r-30">密码</view>
				<u-input class="flex-1 input" :type="paw ? 'text' : 'password'" v-model="password" placeholder="请输入密码" />
				<view class="ic_paw" @click="paw = !paw">
					<image v-show="!paw" src="@/static/images/login/ic_biyan@2x.png" mode=""></image>
					<image v-show="paw" src="@/static/images/login/ic_zhengyan@2x.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="flex-between color-j m-t-30">
			<view class="font-32 flex" @click="isPaw = !isPaw">
				<view class="w-40 h-40 m-r-30 radius-4 border flex-center" :class="{'bj':isPaw}">
					<u-icon name="checkmark" color="#fff"></u-icon>
				</view>记住密码
			</view>
			<view class="font-28" @click="jump('/pages/user/mobile?type=login_paw&scene=reset_pwd')">忘记密码</view>
		</view>
		<view class="w-690 h-88 lh-88 color-c m-t-100 back-color-b radius-49 text-center" @click="login">登录</view>
		<view class="flex-center m-t-50" v-if="!isUniAppWebView && !login_mobile">
			<view class="" style="color: #FB2D19" @click="openH5">下载安卓应用</view>
		</view>
	</view>
</template>
<script>
	import md5Libs from '@/utils/md5'
	import mixin from '@/mixin/captcha'
	export default {
		mixins: [mixin],
		data() {
			return {
				active: 'login',
				is_agree: true,
				mobile: '', // 用户手机号
				password: '', // 密码
				paw: false,
				isPaw: true,
				login_mobile: ''
			}
		},
		computed: {
			isUniAppWebView() {
				return /Html5Plus|UniApp/i.test(navigator.userAgent);
			}
		},
		onLoad() {
			const login_mobile = uni.getStorageSync('login_mobile')
			this.login_mobile = login_mobile
			if (login_mobile) {
				this.mobile = login_mobile
				this.focusPaw()
			}
		},
		methods: {
			openH5() {
				window.open('https://www.pgyer.com/84WOzjyj')
			},
			focusPaw() {
				if (uni.getStorageSync(this.mobile.toString())) {
					this.password = uni.getStorageSync(this.mobile.toString())
				}
			},
			async login() {
				let data = {
					password: md5Libs.md5(md5Libs.md5(uni.$u.trim(this.password)) + 'NiuCloud'),
					mobile: this.mobile,
					role_type: 4,
					nonce: '123123'
				}
				const res = await this.$api.common.user('login', data)
				if (res.code === 200) {
					const {
						access_token,
						client
					} = res.data
					if (this.isPaw) {
						uni.setStorageSync(this.mobile.toString(), this.password)
					}
					uni.setStorageSync('access_token', access_token)
					uni.setStorageSync('member_id', client.member_id)
					uni.showLoading({
						title: '登录中'
					});
					setTimeout(() => {
						uni.hideLoading();
						this.$store.dispatch('getUserInfo').then(() => {
							// this.goBack()
							this.switchTab('/pages/index/index')
						})
					}, 2000)
				}
			}
		},
	}
</script>
<style lang="scss" scoped>
	.login-page {
		position: relative;
		min-height: 100vh;
		padding: 294rpx 30rpx 0;
		box-sizing: border-box;
		background: url(@/static/images/login/bg_circle@2x.png) 0 0 no-repeat;
		background-size: 100% 100%;

		.bg-box {
			width: 100%;
			height: 720rpx;
			padding: 28rpx 86rpx 40rpx;
			margin-bottom: 118rpx;
			// background: url('../static/login/img_denglu@3x.png');
			background-size: 100% 100%;
		}

		.tab-item {
			width: 50%;
			height: 100rpx;
			line-height: 100rpx;
			color: #666;
		}

		.form {
			.cell {
				height: 88rpx;
				border-bottom: 1px solid #ececec;
			}
		}

		.footer {
			position: absolute;
			bottom: 40rpx;
			width: 100%;
		}
	}

	.ic_paw {
		width: 32rpx;
		height: 32rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.input {
		outline: none;
		border: none;
		font-size: 28rpx;
		color: #999999;
	}

	.border {
		border: 1px solid #FB2D19;
	}

	.bj {
		background-color: #FB2D19;
	}
</style>